import React, { Component } from 'react';
import { Divider, Button, Modal, Form, Input, Row, Col, Select, Radio, Table, Card, Icon, Popconfirm, message, Spin} from 'antd';
import { connect } from 'dva';
import styles from '../style.less';


const selectOptions = [
    { value: '医疗设备、器械类', key: '医疗设备、器械类' },
    { value: '学校功能设备类', key: '学校功能设备类' },
    { value: '监控设备及系统类', key: '监控设备及系统类' },
    { value: '公安消防设备类', key: '公安消防设备类' },
    { value: '教育典教类', key: '教育典教类' },
    { value: '车辆交通类', key: '车辆交通类' },
    { value: '纺织类', key: '纺织类' },
    { value: '信息系统集成类', key: '信息系统集成类' },
    { value: '办公家具类', key: '办公家具类' },
    { value: '体育健身类', key: '体育健身类' },
    { value: '其他类', key: '其他类' }
]
const children = []
selectOptions.forEach(v => {
    children.push(<Select.Option value={v.key}>{v.value}</Select.Option>)
})


// 新增管理员
const AddAdministrator = Form.create()(
    // eslint-disable-next-line react/prefer-stateless-function
    class extends React.Component {
        render() {
            const { visible, onCancel, onCreate, form, loading, streets } = this.props
            const { getFieldDecorator } = form
            return (
                    <Modal
                        visible={visible}
                        title="新增企业"
                        width='60%'
                        onCancel={onCancel}
                        onOk={onCreate}
                    >
                        <Spin spinning={loading}>

                            <Form style={{width: '80%', margin:'0 auto'}}>
                                <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 64 }, 16]}>
                                    <Col span={12}>
                                        <div style={{color: '#000'}}>企业名称</div>
                                        <Form.Item style={{marginBottom: '0px'}}>
                                            {getFieldDecorator('name', {
                                                rules: [{ required: true, message: '请输入企业名称!'}],
                                            })(<Input placeholder="请输入企业名称"/>)}
                                        </Form.Item>
                                    </Col>
                                    <Col span={12}>
                                        <div style={{color: '#000'}}>行业类别</div>
                                        <Form.Item>
                                            {getFieldDecorator('industry', {
                                                rules: [{ required: true, message: '请选择!'}],
                                            })(
                                            <Select initialValue="请选择" placeholder="请选择">
                                                {children}
                                            </Select>
                                            )}
                                        </Form.Item>
                                    </Col>
                                </Row>
                                <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 64 }, 16]}>
                                    <Col span={12}>
                                        <div style={{color: '#000'}}>法定代表人</div>
                                        <Form.Item>
                                            {getFieldDecorator('owner', {
                                                rules: [{ required: true, message: '请输入法定代表人!'}],
                                            })(<Input placeholder="请输入法定代表人"/>)}
                                        </Form.Item>
                                    </Col>
                                    <Col span={12}>
                                        <div style={{color: '#000'}}>所在街道</div>
                                        <Form.Item>
                                            {getFieldDecorator('street', {
                                                rules: [{ required: true, message: '请选择!'}],
                                            })(
                                            <Select initialValue="请选择" placeholder="请选择">
                                                {streets}
                                            </Select>
                                            )}
                                        </Form.Item>
                                    </Col>
                                </Row>
                                <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 64 }, 16]}>
                                    <Col span={12}>
                                        <div style={{color: '#000'}}>联系人</div>
                                        <Form.Item>
                                            {getFieldDecorator('contact', {
                                                rules: [{ required: true, message: '请输入联系人!'}],
                                            })(<Input placeholder="请输入联系人"/>)}
                                        </Form.Item>
                                    </Col>
                                    <Col span={12}>
                                        <div style={{color: '#000'}}>职务</div>
                                        <Form.Item>
                                            {getFieldDecorator('job', {
                                                rules: [{ required: true, message: '请输入职务!'}],
                                            })(<Input placeholder="秘书" />)}
                                        </Form.Item>
                                    </Col>
                                </Row>
                                <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 64 }, 16]}>
                                    <Col span={12}>
                                        <div style={{color: '#000'}}>联系电话</div>
                                        <Form.Item>
                                            {getFieldDecorator('phone', {
                                                rules: [{ required: true, message: '请输入联系电话!'}],
                                            })(<Input placeholder="请输入联系电话"/>)}
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </Form>
                            
                        </Spin>  
                    </Modal>
            )
        }
    }
)


@connect(({ enterpriseandtable }) => ({
    enterpriseandtable
}))

class Index extends Component {
    state = {
        // 新增企业弹窗
        addVisible: false,
        uploading: false,
        streets: []
    }

    componentDidMount () {
        
        // 获取街道
        this.streetsInit()
    }

    streetsInit = () => {
        const { dispatch } = this.props
        dispatch({
            type: 'enterpriseandtable/fetchStreets',
        }).then(res => {
            if (res.status === 200) {
                const streets = []
                res.data.forEach(v => {
                    streets.push(<Select.Option value={v.Id} key={v.Id}>{v.Name}</Select.Option>)
                })
                this.setState({
                    streets
                })
            }
            
        })
    }

    saveFormRef = formRef => {
        this.formRef = formRef
    }

    showModal = () => {
        this.setState({ addVisible: true })
    }

    handleCancel = () => {
        this.setState({ addVisible: false })
    }

    // 新增管理员
    handleCreate = () => {
        const { dispatch, create } = this.props
        const { form } = this.formRef.props
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            
            this.setState({
                uploading: true
            })
            
            dispatch({
                type: 'enterpriseandtable/addCompany',
                payload: values
            }).then(res => {
                if (res === 200) {
                    this.setState({
                        uploading: false,
                        addVisible: false
                    })
                    form.resetFields()
                    message.success('成功')
                    // 根据当前页面刷新数据
                    //
                    create()
                }
            })
        })
        
    }

    render () {

        return (
            <>
                <Button icon="plus" type="primary" className={styles.plusCompany} onClick={this.showModal}>新增企业</Button>

                <AddAdministrator 
                    wrappedComponentRef={this.saveFormRef}
                    visible={this.state.addVisible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                    loading={this.state.uploading}
                    streets={this.state.streets}
                />
            </>
        )


    }

}



export default Form.create()(Index);
